<template>
	<div class="">
		<div style="margin-top: 5px;">
			<el-row>
				<el-col :span="11">
					<el-card>
						<div class="tip" style="background-color:  #ECF5FF;">
							<span style="font-weight: 800;">项目总览</span>
							<span style="margin-left: 50px;">
								<el-button icon="el-icon-share" type="text">查看依据</el-button>
							</span>
						</div>
						<div class="pdiagnosis pul">
							<ul>
							</ul>
						</div>
						<!--            todo   这个画布显示的宽度就是width，悬浮窗是tooltip 控制悬浮窗溢出不显示的属性是（confine:true）-->
						<div ref="echarts" class="pdiagnosis" style="margin-left:6px ; width: 100%;height: 200px;"></div>
					</el-card>
				</el-col>
				<el-col :span="12" style="margin-left: 40px">
					<el-card style="height: 280px;">
						<div class="tip" style="background-color:  #ECF5FF;">
							<span style="font-weight: 800;">任务总览</span>
							<span style="margin-left: 50px;">
								<el-button icon="el-icon-share" type="text">查看依据</el-button>
							</span>
						</div>
						<div id="echarts2" class="pdiagnosis" style="margin-left:1px ; width: 100%;height: 200px;"></div>
					</el-card>
				</el-col>
			</el-row>
			<el-card style="margin-top: 20px;height: 300px">
				<div class="tip" style="background-color:  #ECF5FF;">
					<span style="font-weight: 800;">全部进度总览</span>
				</div>
				<div id="echarts3" style=" width: 100%;height: 200px;"></div>
			</el-card>
		</div>
	</div>
</template>
<script>
	import axios from '@/utils/axiosutils.js';
	export default {
		name: 'intelligentReport',
		data() {
			return {
				Pname: [],
				ids: [1, 2],
				projectChartData: [],
				totalChartData:[],
				totalChartData:[],
				charts: null,
				tableData: []
			};
		},
		components: {},
		created() {
			this.init()
		},
		methods: {
			init() {
				axios.post("/project/myProjects", resp => {
					this.Pname = resp.obj.names;
					if (resp.obj.names != null) {
						this.pfname = resp.obj.names[0];
					}
				});
				this.checkItem(null);
				this.projectChart();
				this.taskChart();
				this.totalChart();
			},

			/*项目总览*/
			ck(item) {
				this.pfname = item
			},
			checkItem(item) {
				axios.get("project/projectDetail", resp => {
					this.total = resp.obj.total;
					this.completed = resp.obj.completed;
					this.personNum = resp.obj.personNum;
					this.time = resp.obj.time;
					this.timeleft = resp.obj.timeleft;
					this.remaining = resp.obj.remaining;
				}, {
					projectName: item
				});
			},
			projectChart() {
				axios.post("project/projectOverview", resp => {
					this.projectChartData = resp.obj;
					this.drawPie()
				}, {
					ids: this.ids
				});
				
			},
			drawPie() {
				
				let charts = this.$echarts.init(this.$refs.echarts)
				var data = this.projectChartData;
				var names = [];
				var mydate = [];
				for (var i = 0; i < data.length; i++) {
					names.push(data[i].name);
					mydate[i] = {
						value: data[i].value,
						name: data[i].name
					};
					
				}
				var option = {
					title: {},
					legend: {
						x: '380px',
						y: '60px',
						data: names
					},
					tooltip: {
						//触发方式
						trigger: 'item',
						confine: true,
					},
					radar: {
						center: ['40%', '50%'],
						radius: '60%',
						indicator: [{
							name: '进度',
							max: 1
						}, {
							name: '待办完成率',
							max: 1
						}, {
							name: '任务完成率',
							max: 1
						}, {
							name: '任务关闭率',
							max: 1
						}, {
							name: '任务取消率',
							max: 1
						}]
					},
					series: [{
						name: 'Budget vs spending',
						type: 'radar',
						data: mydate
					}]
				}
				charts.setOption(option);
			},
			taskChart(){
				axios.post("task/taskChart",resp=>{
					
					this.taskChartData=resp.obj
					this.drawPie2();
				},{
					ids:this.ids
				})
				
			},
			
			drawPie2() {
				let charts = this.$echarts.init(document.getElementById('echarts2'))
				var data = this.taskChartData;
				var names = [];
				var mydate = [];
				for (var i = 0; i < data.length; i++) {
					names.push(data[i].name);
					mydate[i] = {
						name: data[i].name,
						type: 'line',
						data: data[i].value,
					};
					
				}
				var option = {
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: names
					},
					grid: {
						left: '6%',
						right: '3%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {},
							magicType: { //动态类型切换
								show: true,
								title: "切换", //各个类型的标题文本，可以分别配置。
								type: ['line', 'bar'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
							},
							restore: { //配置项还原。
								show: true, //是否显示该工具。
								title: "还原",
							},
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2022-1-1', '2022-2-1', '2022-3-1', '2022-4-1', '2022-5-1', '2022-6-1', '2022-7-1', '2022-8-1',
							'2022-9-1', '2022-10-1', '2022-11-1', '2022-12-1'
						].map((str)=>{
							return str.replace(' ','\n')
						})
					},
					yAxis: {
						type: 'value',
						name: '任务量',
						
					},
					series: mydate
				};
				charts.setOption(option);
			},
			totalChart(){
				axios.post("project/projectTotalChart",resp=>{
					this.totalChartData=resp.obj
					this.drawPie3();
				},{
					ids:this.ids
				})
				
			},
			
			drawPie3() {
				let charts = this.$echarts.init(document.getElementById('echarts3'))
				var data = this.totalChartData;
				var names = [];
				var mydate = [];
				for (var i = 0; i < data.length; i++) {
					names.push(data[i].name);
					mydate[i] = {
						name: data[i].name,
						type: 'line',
						data: data[i].value,
					};
					
				}
				var option = {
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: names
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {},
							magicType: { //动态类型切换
								show: true,
								title: "切换", //各个类型的标题文本，可以分别配置。
								type: ['line', 'bar'], //启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
							},
							restore: { //配置项还原。
								show: true, //是否显示该工具。
								title: "还原",
							},
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2022-1-1', '2022-2-1', '2022-3-1', '2022-4-1', '2022-5-1', '2022-6-1', '2022-7-1', '2022-8-1',
							'2022-9-1', '2022-10-1', '2022-11-1', '2022-12-1'
						]
					},
					yAxis: {
						type: 'value',
						name: '任务量',
					},
					series: mydate
				};
				charts.setOption(option);
			}
		},
	}
</script>
<style scoped>
	/* 迭代统计 */
	.overview {
		padding: 10px !important;
	}

	.ul {
		display: block;
		list-style-type: none;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
		padding-inline-start: 0px;
	}

	/* 项目列表 */
	.el-scrollbar {
		width: 100%;
		/* 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区 */
		height: 100%;
		/*   必须设置el-scrollbar的高度 */
		overflow-x: hidden;
	}

	.btn-view {
		/* position: absolute; */
		display: inline-block;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 0px;
		width: 26px;
		text-align: right;
		opacity: 0;
		float: right;
	}

	.btn-view:hover {
		opacity: 1;
		background-color: #bfbfbf;
	}

	.line {
		color: #cecece;
	}

	.line:hover {
		background-color: #d6d6d6;
		cursor: pointer;
		color: #040404;
	}

	.tip {
		border-left: 5px solid #50bfff;
		padding: 5px 15px;
		border-radius: 4px;
		margin: 0px 0;
		color: #409EFF;
	}

	>>>.el-card__body {
		padding: 5px;
	}

	.severe {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #ff0000;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.moderate {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #e0861a;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.mild {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #33a3dc;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.normal {
		display: inline-block;
		width: 7px;
		height: 7px;
		background: #45b97c;
		border-radius: 50%;
		border: 1px solid #909399;
	}

	.severeColor {
		color: #ff0000;
	}

	.moderateColor {
		color: #e0861a;
	}

	.mildColor {
		color: #33a3dc;
	}

	.normalColor {
		color: #45b97c;
	}

	.pdiagnosis {
		display: inline-block;
		vertical-align: middle;
	}

	.pul li {
		padding-bottom: 4px;
	}
</style>
